<%@ page contentType="text/html;charset=UTF-8" language="java" isErrorPage="true" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link href="${pageContext.request.contextPath}/css/customer/customermain.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/dist/jquery-3.6.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/home/index.js"></script>

            <%--游记列表样式--%>
    <style>
        .center .center-right{
            margin-left: 50px;
        }
        .center .center-right .notes-list{
            width: 600px;
            height: 450px;
            /*background-color: #c2c2c2;*/
            float: left;
           /* border: 1px solid;
            border-color: #dedede;*/
        }
        .notes-list ul{
            width: 600px;
            height: 450px;
            list-style: none;
            border: 1px solid;
            border-color: #dedede;
            margin-top: 20px;
        }
        .notes-list .notes_pic_main{
            width: 550px;
            height: 320px;
            margin-left: 25px;
            margin-top: 10px;
            /*background-color: yellow;*/
        }
        .notes-list .notes_title{
            width: 100%;
            height: 35px;
            margin-top: 20px;

            /*background-color: #0000FF;*/
        }
        .notes_title p{
            display: block;
            height: 100%;
            width: 100%;
            font-size: 18px;
            overflow: hidden;
            margin-left: 50px;
            color: #38c4ff;
            font-weight: normal;

        }
        a{
            text-decoration: none;
        }
        a:hover{
            text-decoration:#38c4ff;

        }
        .notes-list .notes_date{
            width: 100%;
            height: 50px;
            /*background-color: #00FFFF;*/
            margin-top: 10px;

        }
        .notes_date span{
            display: block;
            height: 100%;
            width: 100%;
            margin-left: 50px;
            color: #aeabab;
            font-size: 14px;
        }
        .center .notes-more{
            height: 30px;
            width: 600px;
            border: 1px solid;
            border-color: #dedede;
            padding-bottom: 20px;
        }

    </style>
</head>
<body>
<!--====================头部导航条==================================-->
<div class="topBarC">
    <div class="logo">
        <a href="${pageContext.request.contextPath}/index.jsp" title="首页">首页</a>
    </div>

    <div class="t_nav">
        <ul class="t_nav_ul">
            <li>
                <strong class="t">
                    <a href="${pageContext.request.contextPath}/index.jsp">首页</a>
                </strong>
            </li>

            <li>
                <strong class="t">
                    <a href="${pageContext.request.contextPath}/destination/destination_index.jsp">目的地</a>
                </strong>
            </li>

            <li>
                <strong class="t">
                    <a href="">自友行</a>
                </strong>
            </li>

            <li>
                <strong class="t">
                    <a href="">旅游定制</a>
                </strong>
            </li>

            <li>
                <strong class="t">
                    <a href="">游记社区</a>
                </strong>
            </li>


        </ul>
    </div>

    <div class="t_search">
        <form method="get" name="search">
            <input type="text" class="key">
            <input type="submit" class="btn" value="">
        </form>
    </div>

</div>

<!--====================头部背景图===================================-->
<div class="container">
    <div class="banner">
        <div class="banner_img banner_extra"></div>
    </div>
</div>
<div class="tags-bar" >
    <ul >
        <li class="first-item"><a href="${pageContext.request.contextPath}/customer/customermain.jsp">我的沃</a></li>
        <li><a href="${pageContext.request.contextPath}/myorder/myorder_center.jsp">我的订单</a></li>
        <li><a href="${pageContext.request.contextPath}/customer/customer_notes.jsp">我的游记</a></li>
<%--        <li><a href="${pageContext.request.contextPath}/customer/customer_review.jsp">我的评价</a></li>--%>
        <li><a href="${pageContext.request.contextPath}/customer/customer_collection.jsp">我的收藏</a></li>
        <li><a href="${pageContext.request.contextPath}/customer/binding_set.jsp">信息绑定</a></li>

    </ul>

</div>
<div class="center">
    <div class="center-left">
        <ul>
            <li class="touxiang"><img src="${pageContext.request.contextPath}/images/customer/customermaintoux.JPG"> </li>
            <li class="custname"><span>自友行用户</span></li>
        </ul>
    </div>
    <div class="center-right" style="width: 600px;height: 900px">
       <div class="notes-list">
           <%--<ul>
              &lt;%&ndash; <li><img src="" class="notes_pic_main"></li>
               <li><a href=""><div class="notes_title"><p>游记标题</p></div></a></li>
               <li><div class="notes_date"><span>2020/8/6</span></div></li>&ndash;%&gt;
           </ul>--%>
       </div>
        <%--<div class="notes-more">
            <p>加载更多...</p>
        </div>--%>
    </div>
</div>
<script>
    var customer = '<%=request.getSession().getAttribute("loginCustomer")%>';
    console.log("++++++++++++++++++++++" + customer);
    let custId = '${loginCustomer.custId}';
    console.log("custId:" + custId);
        var liEle="";
        var url="${pageContext.request.contextPath}/customer/customermain/"+custId;
        $.get(url,
              null,
              function (result){
              console.log(result);
              for (let i=0; i<result.data.length;i++){
                  liEle+=
                      `<ul>
                        <li><img src="`+result.data[i].travelNotesMainImg+`" class="notes_pic_main">
                        <a href="${pageContext.request.contextPath}/travelnote/customer_notes/`+result.data[i].travelNotesId+`"><div class="notes_title"><p>`+result.data[i].travelNotesTitle+`</p></div></a>
                        <div class="notes_date"><span>`+result.data[i].travelNotesDate+`</span></div>
                        </li>
                        </ul>`
              }
                  $(".notes-list").html(liEle)
              })
</script>
</body>
</html>